<template>
  <div id="chart"></div>
</template>

<script>
import {Graph} from '@antv/x6'

const data = {
  nodes: [{
    x: 150, y: 50,
    width: 120, height: 120,
    ports: {
      groups: {
        group1: {
          attrs: {
            circle: {
              fill: 'orange',
              magnet: true
            }
          },
          position: {
            name: 'top'
          }
        }
      },
      items: [
        { id: 'port1', group: 'group1',
          attrs: {
            text: {
              text: 'port111'
            }
          }
        }, 
        { id: 'port2', group: 'group1', }, 
        { id: 'port3', group: 'group1', },
      ]
    },
  }]
} 

export default {
  name: 'Port',
  mounted() {
    this.createGraph()
  },
  methods: {
    createGraph() {
      const graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        grid: true,
      })
      graph.fromJSON(data);
      const rect = graph.addNode({
        x: 540,
        y: 60,
        width: 100,
        height: 180,
        attrs: {
          body: {
            fill: 'orange',
            stroke: '#d9d9d9',
            strokeWidth: 1,
          },
          label: {
            text: 'port',
            fill: 'white', fontSize: 18
          }
        },
        ports: [
          // 默认样式
          { id: 'port1' },
          // 自定义链接桩样式
          {
            id: 'port2',
            attrs: {
              circle: {
                magnet: true,
                r: 8,
                stroke: '#31d0c6',
                fill: '#fff',
                strokeWidth: 2,
              },
            },
          },
        ],
      })
      rect.addPort({
        id: 'port3',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            fill: '#fff',
            strokeWidth: 2,
          },
        },
      })
      rect.addPort({
        id: 'p1ort4',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            fill: 'red',
            strokeWidth: 2,
          },
        },
      })
    
      graph.addNode({
        x: 300, y: 400,
        width: 200, height: 200,
        attrs: {
          fill: '#eee'
        },
        label: 'in and out',
        attrs: {
          label: {
            fill: 'red'
          }
        },
        ports: {
          groups: {
            grounpIn: {
              position: 'top', // 设置连接桩的位置
              markup: {
                tagName: 'rect',
                selector: 'body',
                attrs: {
                  width: 20,
                  height: 20,
                  rx: 2, ry: 2,
                }
              },
              label: {
                position: 'top',
                attrs: {
                  stroke: 'orange',
                }
              },
              attrs: {
                rect: {
                  r: 8,
                  stroke: 'red',
                  magnet: true,
                }
                
              }
            },
            groupOut: {
              position: 'bottom',
              markup: {
                tagName: 'circle',
                selector: 'circle',
                attrs: {
                  fill: 'orange',
                }
              },
              label: {
                position: 'bottom'
              },
              attrs: {
                circle: {
                  magnet: true,
                  stroke: 'red',
                  r: 8,
                }
              }
            }
          },
          items: [
            {
              id: 'port1',
              group: 'grounpIn',
              attrs: {
                text: { text: 'in1' }
              }
            },
            {
              id: 'port2',
              group: 'grounpIn',
              attrs: {
                text: { text: 'in2' }
              }
            },
            {
              id: 'port3',
              group: 'grounpIn',
              attrs: {
                text: { text: 'in3' }
              }
            },
            {
              // id: 'port2',
              group: 'groupOut',
              attrs: {
                text: { text: 'out1' }
              }
            },
            {
              // id: 'port2', // 可以省略 默认可以自动生成
              group: 'groupOut',
              attrs: {
                text: { text: 'out1' }
              }
            },
          ]
        }
      })
    }
  }
}
</script>

<style>

</style>